<template>
  <div>
    <el-form ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
       <el-row>
        <el-col :span="6" v-if="$store.state.showAgent">
          <el-form-item label="所属区域">
            <el-select style="width:100%" v-model="params.agentid" filterable default-first-option
                       placeholder="--区域--" @change="$refs.pagination.handleSizeChange(10)">
              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="$store.state.showAgent ?18: 24" style="text-align: right">
          <el-form-item>
            <el-button type="primary" plain icon="el-icon-plus" @click="addModel(1)">新增配送模板</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class=" base-table-wrap">
      <el-table :data="classlist.list" stripe style="width: 100%">
        <el-table-column type="index" label="#" width="40" align="center" />
        <el-table-column prop="id" label="ID" min-width="80" align="center" />
        <el-table-column prop="agentname" label="区域名称" min-width="120" align="center" />
        <el-table-column prop="maxcharge" :label="'最大配送费('+comConfig.unit+')'" min-width="120" align="center" />
        <el-table-column :label="'最大配送距离('+comConfig.lengthUnit+')'" min-width="120" align="center">
          <template slot-scope="scope">{{filtersKmToOtherUnit(scope.row.maxdistance)}}</template>
        </el-table-column>
        <el-table-column :label="'基础配送距离('+comConfig.lengthUnit+')'" min-width="120" align="center">
          <template slot-scope="scope">{{filtersKmToOtherUnit(scope.row.nocharge)}}</template>
        </el-table-column>
        <el-table-column prop="createtime" label="创建时间" min-width="120" align="center" />
        <el-table-column fixed="right" label="操作" width="200" align='center'>
          <template slot-scope="scope">
            <el-row style="text-align: center">
              <el-button class="el-text-danger" v-if="scope.row.isdefault !='1'" @click="deleteClass(scope.row)" type="text"  size="mini">删除
              </el-button>
              <el-button class="el-text-success" v-if="scope.row.isdefault !='1'" @click="activitieOnline(scope.row)" type="text" size="mini">设为默认
              </el-button>
              <el-button class="el-text-check" @click="addModel(2,scope.row)" type="text" size="mini" >查看/修改</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable" />
      <pt-pagination ref="pagination" :total="classlist.total" @listeningEvent="triggerEvent" />
    </div>

  </div>
</template>
<script>
  import { kmToOtherUnit } from '@/utils/unitChange.js'
  export default {
    data() {
      return {
        isloadingTable: false, //表单等待
        params: { //表格查询
          page: 0,
          size: 10,
          name: '',
          agentid: '',
        },
        classlist: {} //表单数据
      }
    },
    computed: {
      restaurants() { // 区域数据
        return this.$store.state.agentList
      }
    },
    watch: {
      restaurants: {
        handler(val, oldVal) {
          if (val && val.length) {
            this.params.agentid = val[0].id
            this.getTableList()
          }
        },
        deep: true
      }
    },
    methods: {
      filtersKmToOtherUnit(num) { // 单位换算
        return kmToOtherUnit(num)
      },
      addModel(type, row) { // 新增配送模板
        if (type == '1') {
          console.log(this.params.agentid)
          this.$router.push({path: '/main/agent/setdey', query: {aid: this.params.agentid}})
        } else if (type == '2') {
          this.$router.push({path: '/main/agent/setdey', query: {id: row.id, aid: row.agentid}})
        }
      },
      deleteClass(row) { // 删除配送
        let params = {id: row.id, agentid: row.agentid}
        this.$http.get('/server/deliverCost/delete?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '删除成功'})
            if(this.classlist.list.length =='1'){
              this.$refs.pagination.handleSizeChange(10)
            } else {
              this.getTableList()
            }
          }
        })
      },
      activitieOnline(row) { // 是否生效
        let params = {isdefault: '1', id: row.id, agentid: row.agentid}
        this.$http.get('/server/deliverCost/setToDefault?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '设置成功'})
            this.getTableList()
          }
          this.getTableList()
        })
      },
      getTableList() { //获取列表数据
        this.isloadingTable = true
        const params = {...this.params }
          this.$http.get('/server/deliverCost/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.classlist = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      },
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      },
    },
    mounted() {
      if (this.restaurants && this.restaurants.length) {
        this.params.agentid = this.restaurants[0].id
        this.getTableList()
      }
    }
  }
</script>

<style scoped>
</style>
